<template>
    <div class="container">
        <div class="point">
            <i class="fa-solid fa-road"></i>
            <span @click="curRoad">实时路况</span>
        </div>
        <div class="point">
            <i class="fa-solid fa-video"></i>
            <span @click="roadVideo">视频监控</span>
        </div>
        <div class="things point">
            <i class="fa-solid fa-calendar-days"></i>
            <span @click="changeClick">事件管理</span>
            <ul type="none" class="event" :style="{ display: store.isEvent ? 'block' : 'none' }">
                <li><span @click="addPoint">事件添加</span></li>
                <li><span @click="searchEvent">事件查询</span></li>
            </ul>
        </div>
        <div class="point">
            <i class="fa-solid fa-signs-post"></i>
            <span @click="add">发布公告</span>
        </div>
        <div class="point">
            <i class="fa-regular fa-message"></i>
            <span>路况信息</span>
        </div>
    </div>
    <div class="popup">
        <el-button type="danger" class="close">X</el-button>
        <p>派出所名称 : {{ police_name }}</p>
        <p>派出所地址 : {{ police_area }}</p>
        <p>联系电话 : {{ police_phone }}</p>
        <video width="250" controls
            src="/src/assets/image/Hi我是颠佬原版视频 - 1.studio_video_1687117379080.mp4(Av997423406,P1).mp4"></video>
    </div>
</template>

<script setup>
import { getRoad } from '@/hooks/curRoadHook';
import { event } from '@/hooks/eventHook';
import { inject, onMounted, ref } from 'vue';
import { mapStore } from '@/store';
const store = mapStore()
const { curRoad, roadVideo } = getRoad()
const { addPoint } = event()
let map
const police_name = ref()
const police_area = ref()
const police_phone = ref()
onMounted(() => {
    map = inject('$map')
    map.on('pointermove', function (e) {
        var pixel = map.getEventPixel(e.originalEvent);
        var hit = map.hasFeatureAtPixel(pixel);
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });

    map.on('click', function (evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });
        if (feature) {
            if (feature.get('name') && feature.get('name').endsWith('派出所')) {
                console.log(feature)
                // 获取坐标
                var position = feature.getGeometry().getCoordinates()
                // 获取当前要素对应信息
                police_name.value = feature.get('name')
                police_area.value = feature.get('area')
                police_phone.value = feature.get('phone')
                // 设置popup位置
                var pixel = map.getPixelFromCoordinate(position)
                $('.popup').show(500).css({
                    left: pixel[0] + 'px',
                    top: pixel[1] + 'px'
                })

                $('.close').click(function () {
                    $('.popup').hide(500)
                })
            }
        }
    });
})

const changeClick = () => {
    store.isEvent = !store.isEvent
}

const searchEvent = () => {
    store.isSearch = true
}

const add = () => {
    store.isNotice = true
}


</script>

<style scoped lang="scss">
.container {
    display: flex;
    width: 300px;
    gap: 50px;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
    position: absolute;
    bottom: 15%;
    left: 0%;

    .point {
        cursor: pointer;
    }

    .things {
        position: relative;
        display: flex;

        .event {
            position: absolute;
            top: -15px;
            left: 120px;
            width: 100px;
        }
    }

    i {
        font-size: 25px;
    }

    span {
        font-size: 20px;
        margin-left: 10px;
        color: #fff;
    }
}

.popup {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 250px;
    height: 300px;
    background: #fff;
    display: none;

    .el-button {
        position: absolute;
        top: 0;
        right: 0
    }

    p {
        color: gray;
        font-size: 15px;
        margin-top: 10px;
        padding: 10px
    }
}
</style>
